<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<image class="header-bg" src="https://lvshi.haidanet.com/uni-static/lawyer/img/my/beijing.png"></image>
				<view class="header">
					<view class="title">
						<view class="name">总资产（余额）</view>
						<!-- 	<view class="desc">
							<text class="desc1">今日累计收益：</text>
							<text class="desc2">335</text>
						</view> -->
					</view>

					<view class="setting">
						<view class="date">
							<view class="date1">￥</view>
							<view class="date2">{{ blance }}</view>
						</view>
					</view>
				</view>

				<view class="card menu-1">
					<wd-cell-group>
						<wd-cell is-link title="充值" @click="goPage('/purse/top-up/top-up')">
							<template #icon>
								<text class="iconfont icon-qianbao"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="提现" @click="goPage('/purse/withdraw/withdraw')">
							<template #icon>
								<text class="iconfont icon-chongzhi"></text>
							</template>
						</wd-cell>
					</wd-cell-group>
				</view>

				<view class="card menu-3">
					<wd-cell-group>
						<wd-cell is-link title="账单" @click="goPage('/purse/bill/bill')">
							<template #icon>
								<text class="iconfont icon-jilu"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="提现记录" @click="goPage('/purse/cash/cash')">
							<template #icon>
								<text class="iconfont icon-zhangdan"></text>
							</template>
						</wd-cell>
					</wd-cell-group>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import {
		onShow,
	} from '@dcloudio/uni-app';
	import { useUserStore } from "@/store";
	import useRouter from '@/hooks/useRouter.ts';
	import bg from "./../static/img/beijing.png"
	export default defineComponent({
		name: '',
		setup(props, ctx) {
			const router = useRouter();
			const userStore = useUserStore();
			// 日间light、夜间dark主题
			const theme = ref('light');
			onShow(() => {
				userStore.getUserInfo()
			})

			const blance = computed(() => {
				return userStore.blance
			})
			const goPage = (url : any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push(url)
			}
			return {
				theme,
				goPage,
				blance,
				bg
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		position: relative;
		padding: 24rpx;



		.header-bg {
			position: absolute;
			top: 24rpx;
			left: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			height: 238rpx;
			z-index: 1;
		}

		.header {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: calc(238rpx - 24rpx - 48rpx);
			padding-top: 12rpx;
			padding: 24rpx 24rpx 48rpx;
			top: 0px;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				color: #fff;
			}

			.desc1 {
				font-family: PingFang;
				font-weight: 300;
				font-size: 30rpx;
				color: #ffffff;
			}

			.setting {
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				top: 20rpx;
				right: 20rpx;

				padding-top: 30rpx;

				.iconfont {
					font-size: 50rpx;
				}
			}

			.btn {
				justify: flex-end;
			}

			.avatar {
				width: 108rpx;
				height: 108rpx;
				background: #ffffff;
				border-radius: 50%;
				border: 6rpx solid #ffffff;
			}

			.name {
				font-family: PingFang;
				font-weight: 250;
				font-size: 24rpx;
				color: #ffffff;
				margin: 12rpx;
			}

			.date {
				display: flex;
				align-items: flex-end;
				color: #ffffff;
			}

			.date2 {
				font-family: Akrobat;
				font-weight: bold;
				font-size: 60rpx;
				line-height: 60rpx;
				color: #ffffff;
			}
		}

		.card {
			box-shadow: 0rpx 2rpx 42rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 13rpx;
			overflow: hidden;
		}

		:deep(.wd-cell__value) {
			color: #c91c1f;
		}

		.menu-1 {
			margin-top: 40rpx;

			.iconfont {
				font-size: 40rpx !important;
				margin-right: 10rpx;
			}
		}

		.menu-3 {
			margin-top: 30rpx;

			.iconfont {
				font-size: 40rpx !important;
				margin-right: 10rpx;
			}
		}
	}
</style>